<template>
    <div class="module-content">
        <div class="module-header">
            <h2>留言管理</h2>
            <!-- <div class="filter-bar">
                <el-input v-model="messageSearch" placeholder="搜索留言内容" style="width: 200px" clearable>
                    <template #prefix>
                        <el-icon>
                            <Search />
                        </el-icon>
                    </template>
                </el-input>
            </div> -->
        </div>
        <div class="table-container mt-4">
            <el-table :data="pager.lists" style="width: 100%" stripe>
                <el-table-column prop="id" label="ID" width="80" />
                <el-table-column prop="sign_name" label="用户" width="120" />
                <el-table-column prop="content" label="留言内容" show-overflow-tooltip />
                <el-table-column prop="create_time" label="留言时间" width="180" />
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button size="small" type="danger" @click="handleDeleteMessage(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback';
import { jidian_list, del_jidian } from '@/api/family'
const route = useRoute()


// 留言管理数据
const messageList = ref([
    { id: 1, username: '张三', content: '愿您在天堂安好，我们永远怀念您。', memorialName: '李奶奶纪念馆', createTime: '2024-01-15 10:30:00' },
    { id: 2, username: '李四', content: '感谢您生前对我们的关爱和教导。', memorialName: '王爷爷纪念馆', createTime: '2024-01-14 14:20:00' },
    { id: 3, username: '王五', content: '您的音容笑貌永远留在我们心中。', memorialName: '赵阿姨纪念馆', createTime: '2024-01-13 09:15:00' }
])

// 搜索关键词
const messageSearch = ref('')

// 过滤后的数据
const filteredMessageList = computed(() => {
    if (!messageSearch.value) return messageList.value
    return messageList.value.filter(item =>
        item.content.toLowerCase().includes(messageSearch.value.toLowerCase()) ||
        item.username.toLowerCase().includes(messageSearch.value.toLowerCase())
    )
})

// 留言管理操作
const handleViewMessage = (row: any) => {
    ElMessage.info(`查看留言: ${row.content.substring(0, 20)}...`)
}

const handleDeleteMessage = (row: any) => {
    ElMessageBox.confirm('确定要删除这条留言吗？', '确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async() => {
        await del_jidian({
            id: row.id
        })
        await feedback.msgSuccess('删除成功')
        await getLists()
        // const index = messageList.value.findIndex(item => item.id === row.id)
        // if (index > -1) {
        //     messageList.value.splice(index, 1)
        //     ElMessage.success('删除成功')
        // }
    })
}

// 管理数据
const queryParams = ref({
    family_id: route.query.family_id
})
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: jidian_list,
    params: queryParams.value
})
// 获取数据列表
getLists()
</script>

<style scoped>
.module-content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.module-header {
    padding: 20px;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.module-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.filter-bar {
    display: flex;
    gap: 10px;
    align-items: center;
}

.table-container {
    padding: 0 20px 20px;
}
</style>